"use client";
import React, { useCallback, useState } from "react";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
import { formatCurrency } from "../lib/formatters";
import { Textarea } from "./ui/textarea";
import { Button } from "./ui/button";
import { addProduct, updateProduct } from "../actions/products";
import { useFormState, useFormStatus } from "react-dom";
import { Loader2 } from "lucide-react";
import Image from "next/image";

const ProductForm = ({ product }) => {
  const [priceInCents, setPriceInCents] = useState(product?.priceInCents || 0);
  const onChangePrice = useCallback((e) => {
    setPriceInCents(+e.target.value || 0);
  }, []);

  const action = product ? updateProduct : addProduct;
  const [error, formAction] = useFormState(action, {});

  const { pending } = useFormStatus();
  return (
    <form className="space-y-8" action={formAction}>
      {product && <Input type="hidden" name="id" value={product?.id} />}
      <div className="space-y-2">
        <Label htmlFor="name">Name</Label>
        <Input
          type="text"
          id="name"
          name="name"
          required
          defaultValue={product?.name}
        />
        {error.name && <div className="text-destructive">{error.name}</div>}
      </div>

      <div className="space-y-2">
        <Label htmlFor="priceInCents">Price In Cents</Label>
        <Input
          type="number"
          id="priceInCents"
          name="priceInCents"
          required
          value={priceInCents}
          onChange={onChangePrice}
          defaultValue={product?.priceInCents}
        />
        <div className="text-muted-foreground">
          {formatCurrency(priceInCents)}
        </div>
        {error.priceInCents && (
          <div className="text-destructive">{error.priceInCents}</div>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="description">Description</Label>
        <Textarea
          id="description"
          name="description"
          required
          defaultValue={product?.description}
        />
        {error.description && (
          <div className="text-destructive">{error.description}</div>
        )}
      </div>
      <div className="space-y-2">
        <Label htmlFor="file">File</Label>
        <Input type="file" id="file" name="file" required={!product} />
        {error.file && <div className="text-destructive">{error.file}</div>}
        {product && (
          <div className="text-muted-foreground">{product.filePath}</div>
        )}
      </div>
      <div className="space-y-2">
        <Label htmlFor="image">Image</Label>
        <Input
          type="file"
          accept="image/*"
          id="image"
          name="image"
          required={!product}
        />
        {error.image && <div className="text-destructive">{error.image}</div>}
        {product && (
          <Image
            src={product.imagePath.slice(6)}
            alt="product image"
            width={400}
            height={400}
          />
        )}
      </div>
      <Button type="submit" disabled={pending}>
        {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
        Submit
      </Button>
    </form>
  );
};

export default ProductForm;
